<template>
  <div class="hm-register">
    <!-- <div class="title"></div> -->
    <van-nav-bar title="面经注册" />
    <div class="input">
      <!-- <div class="user"> -->
      <!-- <div class="label"><span>用户名</span></div>
          <div class="user_input"><input type="text" placeholder="用户名" /></div> -->

      <!-- </div> -->
      <van-cell-group>
        <van-field v-model="user" label="用户名" placeholder="用户名" />
      </van-cell-group>
      <!-- <div class="password">
          <div class="label"><span>密码</span></div>
  
          <div class="password_input">
            <input type="password" placeholder="密码" />
          </div>
        </div> -->
      <van-cell-group>
        <van-field
          v-model="password"
          label="密码"
          type="password"
          placeholder="密码"
        />
      </van-cell-group>
    </div>
    <!-- <button class="submit">提交</button> -->
    <van-button color="#58be6a" size="large" @click="get">注册</van-button>
    <div class="footer">
      <router-link to="/login">有账号,去登陆</router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      user: "yanzhan",
      password: "000000",
    };
  },
  methods: {
    async get() {
      if (this.user.trim() === "" || !this.password.trim() === "") {
        alert("请输入用户名或密码");
        return;
      }
      try {
        const src = await axios({
          url: "http://interview-api-t.itheima.net/h5/user/register",
          method: "post",
          data: {
            username: this.user,
            password: this.password,
          },
        });
        if (src.status === 200) {
          this.$toast.success("注册成功");
          this.$router.push("/login");
        }
      } catch {
        this.$toast.fail("注册失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  width: 100%;
  height: 50px;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  line-height: 40px;
}
.input {
  padding: 0 10px;
}
.user {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.password {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.label {
  width: 100px;
  height: 50px;
}
input {
  width: 100%;
  border: none;
  outline: none;
}
.submit {
  width: 100%;
  height: 50px;
  background-color: #e97637;
  color: white;
  border: 0;
  margin-top: 10px;
}
.footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: end;
}
</style>
